<template>
    <div class="VisitRecord">
        <div class="unifyBox">
            <div class="visitTop">
                <div class="h6"><b>当前患者</b></div>
                <div class="topGray">
                    <div class="oneBtn" v-if="false">
                        <button class="btn btn-default">切换病人</button>
                    </div>
                    <div class="zyNum" v-if="false">
                        <p>
                            <label>住院次数：</label>
                            <select class="form-control">
                                <option>第一次</option>
                            </select>
                        </p>
                    </div>
                    <div class="basic clearfix">
                        <p><label>姓名：</label><span>{{selectPatientObj.Name}}</span></p>
                        <p><label>性别：</label><span>{{selectPatientObj.SexName}}</span></p>
                        <p><label>出生日期：</label><span>{{selectPatientObj.Born}}</span></p>
                        <p><label>患者类型：</label><span>{{selectPatientObj.PatientTypeName}}</span></p>
                        <p><label>主索引号：</label><span>{{selectPatientObj.Empi}}</span></p>

                    </div>
                    <div class="basic basic2 clearfix" v-if="false">
                        <p><label>床号：</label><span>2</span></p>
                        <p><label>类型：</label><span>普通病人</span></p>
                        <p><label>入院：</label><span>2019-08-01 09:35</span></p>

                        <p><label>病况：</label><span>一般</span></p>
                        <p><label>诊断信息：</label><span>眼底出血</span></p>
                    </div>
                </div>

            </div>
            <div class="visitDown">
                <div class="lt">
                    <div class="form-group">
                        <p>
                            <input type="text" v-model="Condition" disabled  placeholder="姓名、证件号、住院号"
                                   class="form-control lt"/>
                            <button class="btn btn-default" style="margin-right:0" @click="bbclick()">读卡</button>
                        </p>
                    </div>
                    <div class="h6">患者信息<i class="fa " style="padding: 0px!important;">
                        <button class="btn btn-default" @click="setGZHZ()">关注</button>
                    </i></div>
                    <div class="Tb0">
                        <el-table
                                ref="multipleTable"
                                :data="ZSYList"
                                tooltip-effect="dark"
                                @selection-change="handleSelectionChangeZSY">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    label="患者姓名"
                                    width="120">
                                <template slot-scope="scope">{{ scope.row.Name }}</template>
                            </el-table-column>
                            <el-table-column
                                    prop="SexName"
                                    label="性别"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="PatientTypeName"
                                    label="患者类型"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="Empi"
                                    label="患者主索引"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="IDCard"
                                    label="身份证号"
                                    show-overflow-tooltip>
                            </el-table-column>
                        </el-table>

                    </div>
                </div>
                <div class="ct">
                    <div class="h6">我的关注<i class="fa " style="padding: 0px!important;">
                        <button class="btn btn-warning" @click="setQXGZHZ()">取消关注</button>
                    </i></div>
                    <div class="Tb0">
                        <el-table
                                ref="multipleTable"
                                :data="GZHZList"
                                tooltip-effect="dark"
                                style="width: 50%;position: fixed;bottom: 8px;top: 166px;overflow: auto;"
                                @selection-change="handleSelectionChangeQXGZ"
                        >
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    label="患者姓名"
                                    width="120">
                                <template slot-scope="scope">{{ scope.row.Name }}</template>
                            </el-table-column>
                            <el-table-column
                                    prop="SexName"
                                    label="性别"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="PatientTypeName"
                                    label="患者类型"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="Empi"
                                    label="患者主索引"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="IDCard"
                                    label="身份证号"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>

                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="h6" v-if="false">我的关注111<i class="fa " style="padding: 0px!important;">
                        <button class="btn btn-warning">取消关注11</button>
                    </i></div>
                    <div v-if="false" class="Tb0">
                        <el-table
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    label="患者姓名"
                                    width="120">
                                <template slot-scope="scope">{{ scope.row.date }}</template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="性别"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="患者类型"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="证件号"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="详细信息"
                                    show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                        <button class="btn btn-default" v-if="false">便签</button>

                    </div>
                </div>
                <div v-if="false" class="rt">
                    <div class="h6">便签动态提醒<i class="fa fa-bars"></i></div>
                    <dl>
                        <dd>
                            <div class="timeArea">
                                <p>今天</p>
                                <p>12:20:30</p>
                            </div>
                            <div class="dot"></div>
                            <div class="rwArea">
                                <p><i class="fa fa-file-text-o"></i>任务</p>
                                <p>王伟完成了领导分配的任务</p>
                            </div>
                        </dd>
                        <dd>
                            <div class="timeArea">
                                <p>08-12</p>
                                <p>12:20:30</p>
                            </div>
                            <div class="dot"></div>
                            <div class="rwArea">
                                <p><i class="fa fa-file-text-o"></i>任务</p>
                                <p>王伟完成了领导分配的任务</p>
                            </div>
                        </dd>
                        <dd>
                            <div class="timeArea">
                                <p>08-11</p>
                                <p>12:20:30</p>
                            </div>
                            <div class="dot"></div>
                            <div class="rwArea">
                                <p><i class="fa fa-envelope-o"></i>邮件</p>
                                <p>王伟发送了邮件</p>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <!--弹框：新增便签-->
        <div class="blackBg noteBg" style="display:none">
            <div class="panel-default">
                <em class="closes" onclick="$('.blackBg').hide()">×</em>
                <div class="panel-heading">新增便签</div>
                <div class="form-group">
                    <p>
                        <span>便签标题：</span>
                        <input type="text" class="form-control" placeholder="请输入标题" style="width:590px"/>
                    </p>
                    <p>
                        <span>患者姓名：</span>
                        <select class="form-control">
                            <option>请选择患者</option>
                        </select>
                    </p>
                    <p>
                        <span class="mark1">便签内容：</span>
                        <textarea class="form-control"></textarea>
                    </p>
                    <p>
                        <span>便签状态：</span>
                        <label><input type="radio" name="note" checked/>公开便签</label>
                        <label><input type="radio" name="note"/>私人便签</label>
                    </p>
                    <p>
                        <span>便签类型：</span>
                        <label><input type="radio" name="noteType" checked/>患者可以查看</label>
                        <label><input type="radio" name="noteType"/>患者无法查看</label>
                    </p>
                    <p>
                        <span>提醒类型：</span>
                        <select class="form-control">
                            <option>请选择提醒类型</option>
                        </select>
                    </p>
                    <p>
                        <span>提醒日期：</span>
                        <input class="form-control" placeholder="提醒日期"/>
                    </p>
                </div>
                <div class="modal-footer clearfix">
                    <button type="button" class="btn btn-default" onclick="$('.blackBg').hide()">取消</button>
                    <button type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
        <!--弹框：便签列表-->
        <div class="blackBg noteList" style="display:none">
            <div class="panel-default">
                <em class="closes" onclick="$('.blackBg').hide()">×</em>
                <div class="panel-heading">便签列表</div>
                <div class="form-group">
                    <p>
                        <input type="text" class="form-control" placeholder="请输入患者姓名/便签标题" style="width:200px"/>
                        <button class="btn btn-default">搜索</button>
                    </p>
                    <p>
                        <button class="btn btn-default noteAddBtn">新增</button>
                    </p>
                </div>
                <div class="Tb">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>创建时间</th>
                            <th>患者姓名</th>
                            <th>便签标题</th>
                            <th>详细</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2016-06-22 09:200:29</td>
                            <td>test</td>
                            <td>test</td>
                            <td><a class="noteDetBtn"><i class="fa fa-arrow-circle-right"></i></a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer clearfix">
                    <button type="button" class="btn btn-default" onclick="$('.blackBg').hide()">取消</button>
                    <button type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
        <!--弹框：便签详细-->
        <div class="blackBg noteDetail" style="display:none">
            <div class="panel-default">
                <em class="closes" onclick="$('.blackBg').hide()">×</em>
                <div class="panel-heading">便签信息</div>
                <div class="infoDet">
                    <div class="h6">标签标题：<span>测试</span></div>
                    <p>
                        <span>创建人：<b>医生张三</b></span>
                        <span>创建时间：<b>2016-09-22 12:19:39</b></span>
                    </p>
                    <p>
                        <span>便签内容：<b>测试</b></span>
                    </p>
                    <p>
                        <span>提醒类型：<b>指定日期提醒</b></span>
                        <span>提醒日期：<b>2016-09-30 星期二</b></span>
                    </p>
                </div>
                <div class="Tb">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>创建时间</th>
                            <th>患者姓名</th>
                            <th>便签标题</th>
                            <th>创建用户</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2016-06-22 09:200:29</td>
                            <td>test</td>
                            <td>test</td>
                            <td>test</td>
                            <td>
                                <a><i class="fa fa-times-circle"></i></a>
                                <a><i class="fa fa-arrow-circle-right"></i></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer clearfix">
                    <button type="button" class="btn btn-default" onclick="$('.blackBg').hide()">取消</button>
                    <button type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
        <!--            读卡弹框-->
        <read-card-dialog :isShow="isShow2" @closeDialogFather="getSonCancel"
                          @Readcard="getCardMsg"></read-card-dialog>
    </div>
</template>
<script>
    import ReadCardDialog from "../../views/ReadCardDialog";
    export default {
        name: "Modularinformation",
        components: {
            ReadCardDialog
        },
        data() {
            return {
                msg: "SystemManagement 下的 Modularinformation",
                tableData: [
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-08',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-06',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-07',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }],
                multipleSelection: [],
                selectPatientObj: {
                    Name: "",
                    Born: "",
                    SexName: "",
                    PatientTypeName: "",
                    Empi: ""
                },
                /***************************************/
                ZSYList: [],
                Condition: "",
                doGZHZList: [],
                GZHZList: [],
                qxGZHZList: [],
                /************************读卡**********************/
                isShow2: false,
                CardID: "",
                Mobjection: {},
            }
        },
        methods: {
            /*****************************************读卡*******************/
            bbclick() {
                this.isShow2 = true
            },
            getSonCancel(val) {
                this.isShow2 = val
                console.log(this.isShow2, '回调返回值')
            },

            getCardMsg(val) {
                console.log('回调返回读卡信息')
                console.log(val)
                this.CardID = val.cardno;
                this.isShow2 = false;
                this.Condition= val.cardno;
                this.querZSY()
            },
            /*******************************************************************************/



            handleClick(row) {
                console.log("当前选中患者")
                console.log(row)
                console.log("传送参数");
                this.selectPatientObj = row;

                // this.selectPatientObj = {
                //     Name: "测试",
                //     Born: "2020-01-12",
                //     SexName: "男",
                //     PatientTypeName: "住院",
                //     Empi: "13042319901036"
                // }
                var pJson = JSON.stringify(this.selectPatientObj)
                localStorage.setItem('selectPatient', pJson);
                this.$router.push({
                    path: 'DiagnoseRecord',///SystemManagement/DiagnoseRecord
                    query: {
                        Token: this.msg.Token,
                        loginInfor: this.msg.loginInfor,
                        selectPatient: this.selectPatientObj,
                    }
                })
            },
            //主索引查询
            querZSY() {
                this.ZSYList = [];
                if (this.Condition == null || this.Condition == "") {
                    this.$message({showClose: true, message: "请读取患者身份信息后查询", type: "error"});
                    return
                }
                var data = {
                    Condition: this.Condition
                };
                console.log(data)
                this.$get("/BI2/getPatientList", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.ZSYList = res.data;
                            // res.data.forEach(m=>{
                            //     this.ZSYList
                            // })
                        }
                        console.log("查询结果");
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            handleSelectionChangeZSY(val) {
                console.log("选中需要关注的患者")
                this.doGZHZList = val;
            },
            //关注某些患者
            setGZHZ() {
                if (this.doGZHZList == null || this.doGZHZList.length == 0) {
                    this.$message({showClose: true, message: "请选择关注患者后操作", type: "error"});
                    return
                }
                var EMPISList = []
                this.doGZHZList.forEach(m => {
                    EMPISList.push(m.Empi);
                })
                var data = {
                    EMPIS: EMPISList
                };
                console.log(data)
                this.$post("/BI2/FollowPatientList", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.$message({showClose: true, message: "关注患者成功", type: "success"});
                            // this.querZSY()
                            this.querGZHZ()
                        }
                        console.log("查询结果");
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //查询我关注患者
            querGZHZ() {
                this.GZHZList = [];
                var data = {};
                console.log(data)
                this.$get("/BI2/getFollowPatientList", data)
                    .then(res => {
                        console.log("查询结果");
                        console.log(res);
                        if (res.code == 0) {
                            this.GZHZList = res.data;
                        }

                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            handleSelectionChangeQXGZ(val) {
                console.log("选中需要取消关注的患者")
                this.qxGZHZList = val;
            },
            //取消关注某些患者
            setQXGZHZ() {
                if (this.qxGZHZList == null || this.qxGZHZList.length == 0) {
                    this.$message({showClose: true, message: "请选择需要取消关注患者后操作", type: "error"});
                    return
                }
                var EMPISList = []
                this.qxGZHZList.forEach(m => {
                    EMPISList.push(m.Empi);
                })
                var data = {
                    EMPIS: EMPISList
                };
                console.log(data)
                this.$post("/BI2/cancelFollowPatientList", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.$message({showClose: true, message: "关注患者成功", type: "success"});
                            // this.querZSY()
                            this.querGZHZ()
                        }
                        console.log("查询结果");
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },

            /*******************************************分割*******************************************************/
            openDetails(row, index) {
                this.model_id = row.id;
                this.model_name = row.name;
                this.changeSelectStyle = index;
                if (this.model_XZBJ == "1") {
                    this.model_jm = row.id;
                    this.queryz();
                    this.changeSelectStyle = "0";
                    this.model_jm = "";
                }

                console.log(row);
            },
            handleChange(val) {
                console.log(val);
            },
            //主表保存
            savez() {
                if (this.model_name == "") {
                    this.$message({showClose: true, message: "模块名称不能为空！", type: "error"});
                    return;
                }
                var data = {
                    model: "11.综合维护-模块信息",
                    code: "11041",
                    input: {
                        "id": this.model_id == "" ? "1" : this.model_id,
                        "name": this.model_name
                    }
                };
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.model_XZBJ = "1"
                            this.$message({message: res.msg, type: "success"});
                            this.queryz();
                            this.addMasterUser();
                            document.getElementById("2").focus();
                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //删除主表信息
            deletez() {
                var data = {
                    model: "11.综合维护-模块信息",
                    code: "11043",
                    input: {
                        "id": this.model_id
                    }
                };
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.$message({message: res.msg, type: "success"});
                            this.queryz();
                            this.addMasterUser();
                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //主表查询
            queryz() {
                this.model_query = [];
                var data = {
                    model: "11.综合维护-模块信息",
                    code: "11042",
                    input: {
                        jm: this.model_jm ? this.model_jm : ""
                    }
                };
                console.log(data)
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (this.model_XZBJ == "1") {
                            this.model_query.push(res.data[res.data.length - 1]);
                            this.model_XZBJ = "";
                            this.changeSelectStyle = "0";
                        } else {
                            this.model_query = res.data;
                            this.addMasterUser();
                        }
                        console.log("查询结果");
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },


            submit1() {
                var ele = window.event.srcElement;
                var idcount = parseInt(ele.id) + 1;

                document.getElementById(idcount + "").focus();
            },

        },
        mounted() {

        },
        created() {
            this.msg = this.$route.query;
            console.log("接收过来的传参#############################################################################")
            console.log(this.msg)
            if (this.msg.Token != null && this.msg.Token != "") {
                console.log("设置Token")
                this.$setToken(this.msg.Token)
                this.$setItemUrl(this.msg.ItemIP)
                var loginInfor = this.msg.loginInfor;
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor != null) {
                    // this.huizhenObj.Consult.HospitalId = this.LoginInfor.HospitalId
                    // this.huizhenObj.Consult.DeptId = this.LoginInfor.UserId
                    // this.huizhenObj.Consult.DoctorId = this.LoginInfor.UserId
                }
            } else {
                console.log("Token为空")
                var loginInfor = localStorage.getItem('LoginInfor');
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor == null) {
                    this.LoginInfor = {
                        SectionName: "",
                        UserName: ""
                    }
                }
            }
            // this.querZSY();
            this.querGZHZ();
        }
    };
</script>

<style lang="scss">
    .VisitRecord {
        .visitTop {
            margin: 0;
            background: #f5f5f5;
            padding-right: 256px;
            position: relative
        }

        .visitTop .h6 {
            margin: 0;
            font-size: 14px;
            color: #0089ef;
            height: 15px;
            margin-bottom: 5px;
            line-height: 30px;
            border-bottom: 1px solid #fff;
        }

        .visitTop .h6 b {
            padding: 0 10px;
            background: #f5f5f5;
        }

        .visitTop .topGray {
            margin: 0;
            overflow: hidden;
            padding-top: 5px;
        }

        .visitTop .topGray .oneBtn {
            float: left;
            height: 60px;
            padding: 4px 40px 0 10px;
        }

        .visitTop .topGray .oneBtn .btn {
            color: red;
            background: none;
            border: 1px solid #d5d5d5;
        }

        .visitTop .topGray .zyNum {
            width: 100px;
            float: left;
            margin-right: 49px;
            padding: 0 10px;
            position: relative;
        }

        .visitTop .topGray .zyNum select {
            height: 22px;
            box-shadow: none;
            border: 1px solid #ddd;
            border-radius: 1px;
            background: none;
        }

        .visitTop .topGray .zyNum:after {
            content: '';
            width: 1px;
            height: 33px;
            position: absolute;
            right: -20px;
            top: 15px;
            background: #e2e2f5;
        }

        .visitTop .topGray .zyNum p label {
            margin-bottom: 1px;
            font-weight: normal
        }

        .visitTop .topGray .basic {
            padding: 0;
            max-width: 800px;
            height: 52px;
        }

        .visitTop .topGray .basic p {
            float: left;
            color: #666;
        }

        .visitTop .topGray .basic p:last-child {
            margin-left: -15px;
        }

        .visitTop .topGray .basic label {
            min-width: 55px;
            text-align: right;
            margin-bottom: 0;
            font-weight: normal
        }

        .visitTop .topGray .basic span {
            color: #0092ff;
            display: inline-block;
            min-width: 55px;
            margin-right: 40px;
        }

        .visitTop .topGray .basic2 {
            width: 600px;
            margin-left: 132px;
        }

        .visitTop .weather {
            width: 235px;
            position: absolute;
            right: 10px;
            top: 0;
            background: rgba(0, 0, 0, 0.5);
            height: 100%;
            padding: 10px;
        }

        .visitTop .weather p {
            color: #fff;
            line-height: 20px;
        }

        .visitTop .weather b {
            font-size: 30px;
        }

        .visitTop .weather .p0 {
            float: right
        }

        .visitTop .weather .p0 i {
            margin-right: 8px;
        }

        .visitTop .weather .p1 {
            margin: 15px 0 10px 0;
        }

        .visitDown > div {
            width: 50%;
            float: left;
            padding-left: 10px;
        }

        .visitDown .lt .form-group {
            margin: 10px 0;
        }

        .visitDown .lt .form-group input {
            width: 240px;
            margin-right: 10px;
        }

        .visitDown .rt {
            padding-right: 10px;
        }

        .visitDown .rt dl {
            min-width: 350px;
            padding-top: 12px
        }

        .visitDown .rt dd {
            position: relative;
            clear: both;
        }

        .visitDown .rt .timeArea {
            width: 100px;
            text-align: right;
            float: left
        }

        .visitDown .rt .rwArea {
            width: 200px;
            float: left;
            margin-left: 50px;
            margin-bottom: 15px;
        }

        .visitDown .rt .rwArea .fa {
            display: inline-block;
            width: 20px;
            color: #0092ff;
            font-size: 13px
        }

        .visitDown .rt p {
            line-height: 22px;
        }

        .visitDown .rt .dot {
            width: 10px;
            height: 10px;
            position: absolute;
            display: block;
            border: 2px solid #0092ff;
            border-radius: 2px;
            left: 120px;
            top: 6px;
            background: #fff;
        }

        .visitDown .rt .dot b {
            width: 10px;
            height: 10px;
        }

        .visitDown .rt .dot:before {
            content: '';
            height: 92px;
            border-left: 1px dashed #ccc;
            margin-left: 3px;
            display: inline-block;
            margin-top: 9px;
        }

        .visitDown .rt dl dd:first-child .dot {
            border-color: #fba200;
        }

        .visitDown .rt dl dd:last-child .dot:before {
            border-color: #fff;
        }

        .visitDown .h6 {
            margin: 10px 0 5px 0;
            background: #edf5ff;
            font-size: 14px;
            color: #0089ef;
            height: 30px;
            line-height: 30px;
            padding: 0 3px 0 10px;
        }

        .visitDown .h6 i {
            float: right;
            padding: 7px;
            color: #999;
            cursor: pointer;
            font-size: 15px;
        }

        .visitDown .table {
            margin: 0 0 10px 0;
        }

        .visitDown .btn {
            margin: 0 8px 0 0;
        }

        .visitDown .Tb table th {
            border-bottom: 1px solid #ccc;
        }

        /*弹框：新增便签*/
        .noteBg .panel-default {
            width: 700px;
            margin: 30px auto;
            background: #fff;
            border-radius: 5px;
            position: relative;
        }

        .noteBg .form-group {
            padding: 15px;
            margin: 0;
        }

        .noteBg .form-group p {
            margin-bottom: 5px;
        }

        .noteBg .form-group p label {
            margin-right: 20px;
            cursor: pointer
        }

        .noteBg .form-group p label input {
            position: relative;
            top: 1px;
            margin-right: 5px;
        }

        .noteBg .form-group .form-control {
            width: 200px;
        }

        .noteBg .form-group .mark1 {
            float: left;
            width: 74px;
        }

        .noteBg .form-group .mark1 + textarea {
            width: 590px;
            height: 110px
        }

        /*弹框：便签列表*/
        .noteList .panel-default {
            width: 700px;
            margin: 30px auto;
            background: #fff;
            border-radius: 5px;
            position: relative;
        }

        .noteList .form-group {
            height: 32px;
            margin: 8px 0;
        }

        .noteList .form-group p {
            float: left;
            margin-left: 15px;
        }

        .noteList .form-group p input {
            float: left;
        }

        .noteList .form-group p .btn {
            float: left;
            margin-left: 10px;
        }

        .noteList .Tb {
            margin: 0 15px;
            height: 380px;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        .noteList .Tb i.fa {
            font-size: 17px;
            color: #0092ff;
        }

        .noteList .Tb a {
            display: block;
            cursor: pointer
        }

        /*弹框：便签详细*/
        .noteDetail .panel-default {
            width: 700px;
            margin: 30px auto;
            background: #fff;
            border-radius: 5px;
            position: relative;
        }

        .noteDetail .Tb {
            margin: 0 15px;
            height: 260px;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        .noteDetail .Tb a {
            display: block;
            width: 50%;
            float: left;
            cursor: pointer
        }

        .noteDetail .Tb td a:first-child i {
            font-size: 17px;
            color: red;
        }

        .noteDetail .Tb td a:last-child i {
            font-size: 17px;
            color: #0092ff;
        }

        .noteDetail .infoDet {
            padding-bottom: 25px;
        }

        .noteDetail .infoDet .h6 {
            height: 30px;
            line-height: 30px;
            background: #edf5ff;
            font-size: 14px;
            color: #0089ef;
            margin: 0 0 8px 0;
            padding: 0 15px;
        }

        .noteDetail .infoDet p {
            padding: 0 15px;
            line-height: 26px;
        }

        .noteDetail .infoDet p span {
            margin-right: 50px;
        }
    }

</style>
